<template>
  <div>
    <el-form v-if="!utalk" ref="form" :model="form" label-width="80px" label-position="top">
      <el-form-item label="请选择你的身份">
        <el-select v-model="selectInitUserIndex" placeholder="请选择你的身份">
          <el-option v-for="(item, index) in userMockList" :key="item.userId" :label="item.nickName" :value="index" />
        </el-select>
      </el-form-item>
      <el-button type="primary" v-on:click="initSDK">初始化SDK</el-button>
    </el-form>
    <recent-chat v-if="utalk" :utalk="utalk" />
  </div>
</template>

<script>
import RecentChat from './components/RecentChat.vue'
import UTalkSDK from './UTalkSDK';
import axios from 'axios'

export default {
  name: 'App',
  components: {
    RecentChat
  },
  data() {
    return {
      form: {
        userId: '',
        nickName: '',
        avatar: '',
      },
      utalk: null,
      selectInitUserIndex: null,
      userMockList: [
        {
          userId: "user1Id",
          nickName: "user1Info",
          avatar: "https://www.uutils.com/src/2023/11/10/96630bad77b84126a26b2a4e527ea3c2.png"
        },
        {
          userId: "user2Id",
          nickName: "user2Info",
          avatar: "https://www.uutils.com/src/2024/01/08/7fc8b48f209a400998d5f71c77f93b4f.png"
        },
        {
          userId: "999999",
          nickName: "我的身份是客服",
          avatar: "https://www.uutils.com/src/2023/09/13/73aabf65aefd4824ac8c7882d29b380e.png"
        }
      ]
    }
  },

  computed: {},

  created() { },

  mounted() {
    const initValues = localStorage.getItem('initValues');
    if (initValues) {
      const userInfo = JSON.parse(initValues)
      this.initUtalk(userInfo)
    }
  },

  methods: {
    initSDK() {
      let _this = this;
      const userInfo = _this.userMockList[_this.selectInitUserIndex];
      localStorage.setItem("initValues", JSON.stringify(userInfo));
      this.initUtalk(userInfo)
    },
    initUtalk(userInfo) {
      let _this = this;

      axios.get('http://127.0.0.1:8080/getToken', { params: { userId: userInfo.userId } })
        .then(function (response) {
          //初始化SDK
          _this.utalk = UTalkSDK.init(
            'c9884e3e95c4000',
            userInfo.userId,  //888888
            userInfo.nickName, //stjdydayou
            userInfo.avatar, //http://www.uutils.com/uploads/2023/03/29/636840c078984ad892b88a6728b31618.png,
            response.data
          )
        });
    }
  },

}
</script>